<script setup>
import { toRefs, ref, onMounted, computed } from 'vue';
import { ElMessage, ElTable, ElTableColumn, ElTag, ElTree } from 'element-plus';
import { getSystemLayerRelationList, postSystemLayerRelation, getSystemLayerRelation } from '@/apis/api-system';
import { BASE_MATTER_MAP_URL } from '@/apis/index';
import { OPERATION_TYPE } from '@/common/common-const';
import { useSystemStore } from '@/stores';
import ReleaseLayerOperation from './ReleaseLayerOperation.vue';

const props = defineProps({
  name: {
    type: String,
  },
});
const { name } = toRefs(props);

const titleName = computed(() => name.value);
const systemStore = useSystemStore();

const layerShow = ref(false);
const layerData = ref({});
const currentNodeKey = ref(0);

const defaultProps = {
  id: 'id',
  children: '',
  label: 'title',
};
const treeData = ref([
  {
    title: '全部',
    id: 0,
    children: [],
  },
]);

const tableData = ref([]);

onMounted(() => {
  currentNodeKey.value = 0;
  treeData.value[0].children = systemStore.systemMenu;
  getSystemLayerRelationListApi();
});

const handleOperation = (type, item) => {
  if (type == OPERATION_TYPE.ADD) {
    window.open(BASE_MATTER_MAP_URL, '_blank');
  } else {
    layerData.value = item;
    layerShow.value = true;
  }
};

const handleLayerShowEmit = () => {
  layerShow.value = false;
  layerData.value = {};
};

const handleLayerParamEmit = (item) => {
  postSystemLayerRelationApi({
    menuCode: item.permissionIds,
    serviceId: layerData.value.serviceId,
    layerName: layerData.value.layerMeta.name,
  });
};

const handleNodeClick = (e) => {
  currentNodeKey.value = e.id;

  if (e.id == 0) {
    getSystemLayerRelationListApi();
  } else {
    getSystemLayerRelationApi(e.code);
  }
};

/*
 *@description: 根据目录id查询关联的服务
 *@author:chen_fei
 *@Date: 2024-06-29 11:42:31
 */
const getSystemLayerRelationApi = async (code) => {
  const [err, data] = await getSystemLayerRelation({
    menuCode: code,
  });

  if (!err) {
    if (data.data.length) {
      data.data.map((item) => {
        if (item.children.length) {
          item.children.map((childItem) => {
            childItem['serviceId'] = item.id;
          });
        }
      });
    }

    tableData.value = data.data;
  }
};

/*
 *@description: 分配数据
 *@author:chen_fei
 *@Date: 2024-06-29 11:37:58
 */
const postSystemLayerRelationApi = async (value) => {
  const [err] = await postSystemLayerRelation(value);

  if (!err) {
    ElMessage.success('数据分配成功');
    getSystemLayerRelationListApi();

    handleLayerShowEmit();
    currentNodeKey.value = 0;
  }
};

/*
 *@description: 获取已发布的图层数据
 *@author:chen_fei
 *@Date: 2024-06-29 11:12:47
 */

const getSystemLayerRelationListApi = async () => {
  const [err, data] = await getSystemLayerRelationList();

  if (!err) {
    if (data.data.length) {
      data.data.map((item) => {
        if (item.children.length) {
          item.children.map((childItem) => {
            childItem['serviceId'] = item.id;
          });
        }
      });
    }

    tableData.value = data.data;
  }
};
</script>
<template>
  <div class="root h-100% w-100% rounded-5px p-1.5rem">
    <div class="flex-x-center">
      <div class="flex-x-center">
        <div class="left_box">
          <h3>组织架构</h3>
          <div class="tree_box">
            <ElTree
              ref="treeRef"
              node-key="id"
              class="filter-tree"
              default-expand-all
              :data="treeData"
              :props="defaultProps"
              :highlight-current="true"
              :expand-on-click-node="false"
              :current-node-key="currentNodeKey"
              @node-click="handleNodeClick"
            />
          </div>
        </div>
      </div>
      <div class="right_box">
        <h3>{{ titleName }}</h3>
        <div class="flex-x-end cursor-pointer">
          <div class="btn-add flex-center" @click="handleOperation('ADD')">数据智能中台</div>
        </div>
        <div class="mt-20px">
          <ElTable
            :data="tableData"
            style="width: 100%"
            border
            row-key="id"
            :header-cell-style="{
              color: '#333333',
              background: 'rgba(97, 186, 55, 0.06)',
            }"
          >
            <ElTableColumn type="index" label="序号" align="center" width="65" />
            <ElTableColumn prop="id" label="数据ID(服务ID)" align="center" show-overflow-tooltip />

            <ElTableColumn prop="serviceName" label="地图服务名称/图层名称" align="center">
              <template #default="scope">
                <p>{{ scope.row?.serviceName ? scope.row?.serviceName : scope.row?.layerMeta?.name }}</p>
              </template>
            </ElTableColumn>
            <ElTableColumn prop="proj4" label="proj4" align="center" show-overflow-tooltip>
              <template #default="scope">
                <p>{{ scope.row?.proj4 ? scope.row?.proj4 : scope.row?.layerMeta?.proj4 }}</p>
              </template>
            </ElTableColumn>
            <ElTableColumn prop="type" label="类型" align="center" show-overflow-tooltip>
              <template #default="scope">
                <p>{{ scope.row?.layerMeta?.type ? scope.row?.layerMeta?.type : '--' }}</p>
              </template>
            </ElTableColumn>
            <ElTableColumn prop="fields" label="属性字段" align="center" show-overflow-tooltip>
              <template #default="scope">
                <div
                  v-if="scope.row?.layerMeta?.fields"
                  :title="
                    scope.row?.layerMeta?.fields
                      .map((item) => {
                        return item?.name;
                      })
                      .join('、')
                  "
                >
                  <ElTag v-for="item in scope.row?.layerMeta?.fields" :key="item.index" size="large" type="warning">{{
                    item?.name
                  }}</ElTag>
                </div>
                <p v-else>--</p>
              </template>
            </ElTableColumn>
            <ElTableColumn prop="created" label="创建时间" align="center" show-overflow-tooltip>
              <template #default="scope">
                <p>{{ scope.row?.created ? scope.row?.created : '--' }}</p>
              </template>
            </ElTableColumn>

            <ElTableColumn v-if="!currentNodeKey" label="操作" align="center">
              <template #default="scope">
                <div v-if="scope.row?.layerMeta?.type" class="flex items-center justify-around">
                  <div
                    class="edit_btn h-35px w-87px flex-center cursor-pointer"
                    @click="handleOperation('EDIT', scope.row)"
                  >
                    数据分配
                  </div>
                </div>
              </template>
            </ElTableColumn>
          </ElTable>
        </div>
      </div>
    </div>

    <ReleaseLayerOperation
      v-if="layerShow"
      :layer-show="layerShow"
      :layer-data="layerData"
      @handle-layer-show-emit="handleLayerShowEmit"
      @handle-layer-param-emit="handleLayerParamEmit"
    />
  </div>
</template>

<style scoped lang="scss">
.root {
  font-size: $base-system-font-size-base;
  background-color: $base-background-white;
  .left_box {
    width: 300px;
    height: 100%;

    h3::before {
      content: '|';
      width: 4px;
      height: 30px;
      margin-right: 5px;
      color: $base-color-green;
      font-size: 18px;
      background-color: $base-color-green;
    }

    .tree_box {
      width: 100%;
      max-height: 837px;
      margin-top: 30px;
      padding-right: 20px;
      overflow: auto;

      &::-webkit-scrollbar {
        display: none;
        width: 0 !important;
      }

      :deep(.el-tree-node__content) {
        height: 40px;
        padding-right: 9px;
        font-size: 18px;
      }

      :deep(.el-tree-node:focus > .el-tree-node__content) {
        background-color: #fff;
      }

      :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
        background-color: #f0fcf2;
      }
    }
  }
  .right_box {
    width: calc(100% - 300px);

    .btn-add {
      width: 140px;
      height: 40px;
      color: $base-button-color-white;
      background-color: $base-button-color-green;
      border-radius: 5px;
    }
    .edit_btn {
      font-size: $base-system-font-size-base;
      border-radius: 5px;
    }
    .edit_btn {
      color: $base-button-color-blue;
      background-color: $base-button-background-blue;
    }
  }
}
</style>
